<!DOCTYPE html>
<html>
    <head>
        <title>Candy</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
        <link type="text/css" rel="stylesheet" href="css/widgets.css" />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/coin-slider/coin-slider.js"></script>
        <link rel="stylesheet" href="js/coin-slider/coin-slider-styles.css" type="text/css"/>
        <link rel="stylesheet" href="js/treeview/jquery.treeview.css" />
        <script src="js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>
        <script src="js/capslide/jquery.capSlide.js" type="text/javascript"></script>
        <link rel="stylesheet" href="js/capslide/css/modify_style.css" />

        <script type="text/javascript">
            $(document).ready(function(){
                $(".product_category").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                    
                $('.link_list_1 ul.list li:last-child').addClass('last');
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="wrapper_top">
                <div id="hook_top_1" class="hook">
                    <div id="hook_top_1_1" class="hook">
                        <!-- USER BLOCK -->
                        <div id="user_block_wi" class="user_block">
                            <div class="user_infor">Welcome <a href="#">(login)</a></div>
                        </div>
                        <!-- END USER BLOCK -->

                        <!-- WIDGET CART BLOCK -->
                        <div id="cart_block_wi" class="cart_block">
                            <ul>
                                <li><a href="#">Your cart</a></li>
                                <li class="cart_block_infor"><a href="#"><span id="cart_total_products"> 0 </span> item(s)</a></li>
                            </ul>
                        </div>
                        <!-- END WIDGET CART BLOCK 3 -->
                    </div>

                </div>
                <!-- End #hook_top_1 -->

                <div id="hook_top_2" class="hook">

                    <div id="hook_top_2" class="hook">
                        <!-- LOGO WIDGET -->
                        <div id="logo_wi" class="logo">
                            <div id="image_wrapper">
                                <img src="images/logo.png" alt="logo_image"/>
                            </div>
                            <div id="logo_description">
                                Candy online store
                            </div>
                            <!-- End #logo_description -->
                        </div>
                        <!-- END LOGO WIDGET -->

                        <!-- HMENU WIDGET -->
                        <div id="hmenu_wi" class="hmenu">
                            <div class="hmenu_wrapper">
                                <ul class="hmenu_list">
                                    <li>
                                        <a href="#" class="active">Home</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                    <li>
                                        <a href="#">News</a>
                                    </li>
                                    <li>
                                        <a href="#">Contact</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- End hmenu_wrapper -->
                        </div>
                        <!-- END HMENU WIDGET --> 
                    </div>
                    <!-- END #hook_top_2 -->

                </div>
                <!-- End #hook_top_2 -->
            </div>
            <!-- End #wrapper_top -->

            <div id="wrapper_main">

                <div id="hook_custom_1" class="hook">
                    <div id="hook_sidebar" class="hook">

                        <!-- SEARCH BAR WIDGET -->
                        <div id="search_bar_wi" class="search_bar"> 
                            <form id="searchForm" class="searchForm" action="#" method="post">
                                <div class="search_panel">
                                    <input type="text" class="searchText" id="searchText" value="Search Keyword Here ..."/> 
                                    <input name="search" type="image" class="buttonSearch" id="buttonSearch" src="images/search_icon.png" value=""/>
                                </div>
                            </form>
                        </div>
                        <!--END SEARCH BAR WIDGET --> 

                        <!-- PRODUCT CATEGORY WIDGET -->
                        <div id="product_category_wi" class="product_category">
                            <div class="title">
                                <span>categories</span>
                            </div>
                            <!-- End .title -->

                            <ul class="category_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                            </ul>
                            <!-- End .category_list -->
                        </div>
                        <!-- END PRODUCT CATEGORY WIDGET -->

                        <!-- PRODUCT FILTER WIDGET -->
                        <div id="product_filter_wi" class="product_filter">
                            <div class="title">
                                <span>Special Today</span>
                            </div>
                            <!-- End .title -->

                            <div class="product_blocks">
                                <div class="image_wrapper">
                                    <a href="#"><img src="images/candy.png" alt="product_feature"/></a>
                                </div>
                                <div class="product_infor">
                                    <a class="product_name" href="#">Gummy bear Product #10</a>
                                    <div class="price">199$</div>
                                </div>
                                <!-- End .product_infor -->
                                <div class="clear"></div>  
                            </div>
                            <!-- End .product_blocks -->

                            <div class="product_blocks">
                                <div class="image_wrapper">
                                    <a href="#"><img src="images/candy.png" alt="product_feature"/></a>
                                </div>
                                <div class="product_infor">
                                    <a class="product_name" href="#">Gummy bear Product #10</a>
                                    <div class="price">199$</div>
                                </div>
                                <!-- End .product_infor -->
                                <div class="clear"></div>  
                            </div>
                            <!-- End .product_blocks -->
                        </div>
                        <!-- END PRODUCT FILTER WIDGET -->

                        <!-- HOTLINE WIDGET -->
                        <link type="text/css" rel="stylesheet" href="../../widget/hotline/1/hotline_1.css" /> 
                        <div id="hotline_wi_1" class="hotline_1">
                            <div class="hotline_wrapper">
                                <div class="hotline_content">
                                    <p class="title">Call for Free</p>
                                    <p class="phone_number">+1-234-567-8900</p>
                                    <p class="desc">Our expect staff is standing by to answer your questions</p>
                                </div><!-- End .hotline_content -->
                            </div>
                            <!-- End .hotline_wrapper -->
                        </div>
                        <!-- END HOTLINE WIDGET -->
                    </div>
                    <!-- End #hook_sidebar -->

                    <div id="hook_custom_2" class="hook">
                        <!-- BREADCRUMBS WIDGET -->
                        <div id="breadcrumbs_wi" class="breadcrumbs">
                            <ul class="list">
                                <li><a href="#">Home</a></li>
                                <li class="current">
                                    <a href="#">Product</a>
                                </li>
                            </ul>                            
                        </div>
                        <!-- END BREADCRUMBS WIDGET -->

                        <!-- NEWS DETAILS WIDGET -->
                        <div id="news_details_wi" class="news_details">
                            <div class="news_title">
                                <h1>Nulla suscipit elementum justo</h1>
                            </div>
                            <!-- END .news_title -->

                            <div class="post_infor">
                                <div class="user_post">
                                    by <span> Admin </span>
                                </div>  
                                <!-- END .user_post -->

                                <div class="post_time">
                                    Date <span> 11/12/2011 </span>
                                </div>  
                                <!-- END .post_time -->
                                <div class="clear"></div>
                            </div>
                            <!-- END .post_infor -->

                            <div class="news_details_content">
                                <p>Nam pulvinar consectetur interdum. Cras et metus lacus, non porta quam. Phasellus posuere iaculis libero, ut vestibulum lectus faucibus at. Ut pellentesque molestie molestie. Suspendisse ultricies elementum laoreet. In purus nisl, convallis tristique adipiscing id, ullamcorper eget lectus. Nullam ut pulvinar sem. Sed sit amet iaculis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam at interdum velit. Nam elementum eros vel mi mattis venenatis. Maecenas ut mauris neque. Proin tincidunt tellus laoreet elit hendrerit eget tristique metus ornare. Integer eu imperdiet augue. Donec molestie nunc at sem laoreet sed eleifend arcu sagittis.</p>     
                            </div>
                            <!-- END .news_details_content -->
                        </div>
                        <!-- END NEWS DETAILS WIDGET -->

                    </div>
                    <!-- END #hook_custom_2 -->
                    <div class="clear"></div>
                </div>
                <!-- End #hook_custom_1 -->

            </div>
            <!-- End #wrapper_main -->

            <div id="wrapper_footer">
                <div id="hook_footer" class="hook">
                    <!-- HTML WIDGET -->
                    <div id="html_wi_1" class="html_1">
                        <img src="images/logo_footer.png" alt="logo_footer_image"/>
                    </div>
                    <!-- END HTML WIDGET -->

                    <!-- LINK LIST WIDGET -->
                    <div id="link_list_wi_1" class="link_list_1">
                        <ul class="list">
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Customer Service</a></li>
                            <li><a href="#">Site Map</a></li>
                            <li><a href="#">Search Terms</a></li>
                            <li><a href="#">Advanced Search</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                    <!-- END LINK LIST WIDGET -->

                    <!-- COPYRIGHT WIDGET -->
                    <div id="copyright_wi" class="copyright">
                        <p>©2012 POWERED BY HANDBAG™. ALL RIGHT RESERVED.</p>
                    </div>
                    <!-- END COPYRIGHT WIDGET -->

                    <!-- SOCIAL WIDGET -->
                    <div id="social_wi" class="social">
                        <div class="header">Get social</div>
                        <ul class="list">
                            <li><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li>
                            <li><a href="#"><img src="images/twitter.png" alt="twitter" /></a></li>
                            <li><a href="#"><img src="images/tumbl.png" alt="tumbl" /></a></li>
                        </ul>
                    </div>
                    <!-- END SOCIAL WIDGET -->
                </div>
            </div>
            <!-- End #wrapper_footer -->
        </div>    
        <!-- End #wrapper -->
    </body>
</html>
